<template>
  <nut-popup 
    v-model:visible="visible" 
    position="center" 
    :style="{ width: '80%', borderRadius: '24rpx' }"
    @close="handleClose"
  >
    <view class="add-popup">
      <view class="popup-header">
        <text class="popup-title">{{ title }}</text>
      </view>

      <view class="popup-content">
        <nut-input 
          v-model="inputValue" 
          :placeholder="placeholder" 
          :maxlength="maxlength" 
          clearable 
          class="tag-input" 
        />
      </view>

      <view class="popup-footer">
        <nut-button 
          type="default" 
          class="flex-1" 
          @click="handleCancel"
        >
          取消
        </nut-button>
        <nut-button 
          type="primary" 
          class="flex-1 ml-3" 
          @click="handleConfirm"
        >
          确定
        </nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup>
import { ref, watch } from 'vue'

// Props
const props = defineProps({
  // 弹窗显示状态
  modelValue: {
    type: Boolean,
    default: false
  },
  // 弹窗标题
  title: {
    type: String,
    default: '添加标签'
  },
  // 输入框占位符
  placeholder: {
    type: String,
    default: '请输入标签名称'
  },
  // 最大输入长度
  maxlength: {
    type: Number,
    default: 50
  },
  // 初始值
  initialValue: {
    type: String,
    default: ''
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])

// 响应式数据
const visible = ref(false)
const inputValue = ref('')

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
  if (newVal) {
    inputValue.value = props.initialValue
  }
})

// 监听 visible 变化，同步到父组件
watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
})

// 处理关闭
const handleClose = () => {
  visible.value = false
  emit('close')
}

// 处理取消
const handleCancel = () => {
  visible.value = false
  inputValue.value = ''
  emit('cancel')
}

// 处理确定
const handleConfirm = () => {
  const value = inputValue.value.trim()
  if (!value) {
    return
  }
  
  visible.value = false
  emit('confirm', value)
  inputValue.value = ''
}

// 暴露方法给父组件
defineExpose({
  open: () => {
    visible.value = true
    inputValue.value = props.initialValue
  },
  close: () => {
    visible.value = false
  },
  setValue: (value) => {
    inputValue.value = value
  }
})
</script>

<style lang="scss" scoped>
// 弹窗样式优化
.add-popup {
  padding: 40rpx 32rpx;
  background: #fff;
  border-radius: 24rpx;

  .popup-header {
    text-align: center;
    padding-bottom: 32rpx;
    border-bottom: 2rpx solid #f5f5f5;
    margin-bottom: 40rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #333;
      background: linear-gradient(135deg, #FF8A00 0%, #FF5A00 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  .popup-content {
    padding: 20rpx 0;

    .tag-input {
      :deep(.nut-input) {
        border: 2rpx solid #e8ecff;
        border-radius: 16rpx;
        padding: 20rpx 24rpx;
        font-size: 30rpx;
        background: #fafbff;
        transition: all 0.3s ease;

        &:focus {
          border-color: #667eea;
          background: #fff;
          box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
        }
      }
    }
  }

  .popup-footer {
    display: flex;
    gap: 24rpx;
    margin-top: 40rpx;

    .nut-button {
      flex: 1;
      height: 88rpx;
      border-radius: 16rpx;
      font-size: 30rpx;
      font-weight: 600;
      transition: all 0.3s ease;

      &[type="default"] {
        background: #f5f5f5;
        color: #666;
        border: 2rpx solid #e0e0e0;

        &:active {
          background: #e8e8e8;
        }
      }

      &[type="primary"] {
        background: linear-gradient(135deg, #FF8A00 0%, #FF5A00 100%);
        border: none;
        box-shadow: 0 6rpx 16rpx rgba(255, 138, 0, 0.3);

        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 4rpx 12rpx rgba(255, 138, 0, 0.4);
        }
      }
    }
  }
}
</style>
